<template>
    <div class="wrap">
        <div class="list" style="border-bottom:1px solid #262934;margin-bottom:0">
            <span>手机号码</span>
            <input type="tel" maxlength="11" v-model='phone' placeholder='请输入手机号' @keyup='isPhoneClean'>
            <img src="../../assets/icon_clean.png" class="rIcon" v-show="isphone" @click='cleanPhone' alt="">
        </div>
        <div class="list">
            <span>验证码&nbsp;&nbsp;&nbsp;</span>
            <input type="tel" maxlength="6" v-model='code' placeholder='请输入验证码' style="width: 4rem;">
            <span @click='getphoneCode' class="rIcon cdspan" v-text='phoneCodetitle'></span>
        </div>
    
        <div class="list">
            <span>登录密码</span>
            <input v-if='ispassword1' type="password" maxlength="16" v-model='password1' placeholder='6-16位数字和字母组成' @keyup='isCleanShow1'>
            <input v-if='!ispassword1' type="text" maxlength="16" v-model='password1' placeholder='6-16位数字和字母组成' @keyup='isCleanShow1'>
            <img src="../../assets/icon_clean.png" v-show="passShow1" @click='isClean1' alt="">
            <img class="rIcon" :src="passwordSrc1" alt="" @click='checkTpye1'>
        </div>
        <div class="list">
            <span>确认密码</span>
            <input v-if='ispassword2' type="password" maxlength="16" v-model='password2' placeholder='再次输入新登录密码' @keyup='isCleanShow2'>
            <input v-if='!ispassword2' type="text" maxlength="16" v-model='password2' placeholder='再次输入新登录密码' @keyup='isCleanShow2'>
            <img src="../../assets/icon_clean.png" v-show="passShow2" @click='isClean2' alt="">
            <img class="rIcon" :src="passwordSrc2" alt="" @click='checkTpye'>
        </div>
        <v-button buttonText='确定' :isActive='isActive' topNum='0.8rem' @toNext='confirm'></v-button>
        <input type="hidden" name="" id="key" value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK39UZuExZ/LydZzZxLlF57nrowot4ATvQnhMG+iq/6QO9URCjDT5WkeN77bkUGnxxQNz3lRFRLZzQNqB81lgtsfdh/K/pVKZ4oPzJTpMLOXbxxlHhfFNDYIvpF/TZx/mYEj7f3K7+HfNq/JRf4Fq8jgjQ8p2GL5j6uyiCYgdQywIDAQAB" />
        
        <!--<v-RightArrowList :item='item' @toNext='test'></v-RightArrowList>-->
    </div>
</template>
<script>
import Button from '@/components/Button'
import login from '@/api/login/index'
import { toast, isPhone, isPassWord } from '@/util/index'
export default {
    data() {
        return {
            phone: '',
            isphone: false,
            phoneCodetitle: '获取验证码',
            count: 60,
            code: '',
            password1: '',
            passShow1: false,
            ispassword1: true,
            passwordSrc1: require('../../assets/icon_hide_pwd.png'),
            password2: '',
            passShow2: false,
            ispassword2: true,
            passwordSrc2: require('../../assets/icon_hide_pwd.png')
        }
    },
    computed: {
        isActive() {
            if (isPhone(this.phone) && isPassWord(this.password1) && isPassWord(this.password2) && this.password1 == this.password2 && this.code.length == 6) {
                return true
            } else {
                return false
            }
        }
    },
    components: {
        'v-button': Button
    },
    methods: {
        isPhoneClean() {
            if (this.phone != '') {
                this.isphone = true
            } else {
                this.isphone = false
            }
        },
        cleanPhone() {
            this.phone = '',
                this.isphone = false
        },
        getphoneCode() {
            if (isPhone(this.phone)) {
                if (this.count != 60) {
                    return false
                }
                let timer = setInterval(() => {
                    this.count--
                    this.phoneCodetitle = `${this.count}秒`
                    if (this.count == 0) {
                        clearInterval(timer)
                        this.phoneCodetitle = '获取验证码'
                        this.count = 60
                    }
                }, 1000)
                let sendData = {
                    phone: this.phone,
                    plat:"mlj"
                }
                login.userGetForgotCode(sendData).then(data => {
                    if (data.data.code == 200) {

                    } else {
                        toast(data.data.message)
                    }
                })
            }
        },
        isCleanShow1() {
            if (this.password1 != '') {
                this.passShow1 = true
                return
            } else {
                this.passShow1 = false
                return
            }
        },
        isClean1() {
            if (this.password1 != '') {
                this.password1 = ''
                this.passShow1 = false
                return
            }
        },
        checkTpye1() {
            this.ispassword1 = !this.ispassword1;
            if (!this.ispassword1) {
                this.passwordSrc1 = require('../../assets/icon_show_pwd.png')
            } else {
                this.passwordSrc1 = require('../../assets/icon_hide_pwd.png')
            }
        },
        isCleanShow2() {
            if (this.password2 != '') {
                this.passShow2 = true
                return
            } else {
                this.passShow2 = false
                return
            }
        },
        isClean2() {
            if (this.password2 != '') {
                this.password2 = ''
                this.passShow2 = false
                return
            }
        },
        checkTpye() {
            this.ispassword2 = !this.ispassword2;
            if (!this.ispassword2) {
                this.passwordSrc2 = require('../../assets/icon_show_pwd.png')
            } else {
                this.passwordSrc2 = require('../../assets/icon_hide_pwd.png')
            }
        },
        confirm() {
            console.log('confirm')
            let encrypt = new JSEncrypt();
           encrypt.setPublicKey(document.getElementById('key').value);
            if (this.isActive) {
                let sendData = {
                    phone: this.phone,
                    code:this.code,
                    newPwd: encrypt.encrypt(this.password2),
                    plat:"mlj"
                }
                login.userForgot(sendData).then(data=>{
                    if(data.data.code==200){
                        toast(data.data.message)
                        this.$router.push({ path: '/home' })
                    }else{
                        toast(data.data.message)
                    }
                })
            }
            
        }
    },
    beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	}
}
</script>
<style lang='less' scoped>
@import '../../less/config.less';
.wrap {
    height: 100%;
    background-color: @bgColor;
    padding-top: @p30;
}

.list {
    height: 1.1733rem;
    padding: 0 @p30;
    margin-bottom: 0.34667rem;
    position: relative;
    font-size: 0.42667rem;
    color: #fff;
    background-color: #141723;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    span {
        display: inline-block;
        width: 1.8rem;
    }
    .cdspan {
        width: 2.93rem;
        color: @actColor;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        right: @p30;
        border-left: 1px solid #262934;
    }
    img {
        width: 0.42667rem;
        line-height: 1.1733rem;
        vertical-align: middle
    }
    .rIcon {
        position: absolute;
        right: @p30;
        top: 0.45rem;
        /*text-align: right;*/
    }
     .cdspan {
        width: 2.93rem;
        color: @actColor;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        right: @p30;
        border-left: 1px solid #262934;
        top: 0.09rem;
    }
    input {
        padding-left: @p30;
        width: 5.7rem;
        color: #ffffff;
        line-height: .6rem;
        height: .6rem;
        margin-top: .25rem;
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 4 to 18*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+*/
        color: @placeColor;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10+*/
        color: @placeColor;
    }
}
</style>

